<template>
  <div class="app-container">
    <div class="app-title">
      <span>生成单位数据</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i :class="[treeShow ? 'el-icon-s-fold treeI' : 'el-icon-s-unfold treeI']" @click="toggerTree" />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group v-model="activeName" style="margin-left:4rem; width:700px; height:15px; margin-top:-67px "
            @change="handleQuery">
            <el-radio-button label="0" name="noGenerate"><img style=" height:14px;" :src="Processedimg">未生成
            </el-radio-button>
            <el-radio-button label="1" name="generate"><img style="height:14px;" :src="Untreatedimg">已生成
            </el-radio-button>
            <el-radio-button label="2" name="monthEndStop"><img style="height:14px;" :src="Untreatedimg">暂存
            </el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <div class="filter-container">
        <el-col style="text-align:right;margin-top: -3px;" :span="16">
          <el-select v-model="batch" class="filter-item" @change="handleQuery">
            <el-option key="" label="全部批次" value="" placeholder="全部银行" />
            <el-option v-for="item in batchs" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>

          <el-select v-model="salaCardBank" class="filter-item" placeholder="全部银行" :disabled='checkloading'
            @change="handleQuery">
            <el-option v-for="item in agencyBankLists" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>

          <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="Query">
            查询
          </el-button>
          <el-button v-if="activeName === '0'" size="small" class="filter-item" style="margin-left: 10px;"
            type="primary" :loading="stopLoading" @click="MonthEndStop">
            暂存
          </el-button>
          <el-button v-if="activeName === '2'" size="small" class="filter-item" style="margin-left: 10px;"
            type="primary" :loading="stopLoading" @click="revokeMonthEndStop">
            撤销暂存
          </el-button>
          <el-button v-if="activeName === '0'" size="small" class="filter-item" style="margin-left:10px;" type="primary"
            :loading="checksalaryLoading" @click="checkSalaryData">
            检测
          </el-button>
          <el-button v-if="activeName === '0'" size="small" class="filter-item" style="margin-left:10px;" type="primary"
            :loading="makeLoading" @click="showProgress">
            生成并发送
          </el-button>
          <el-button v-if="activeName === '1'" size="small" class="filter-item" style="margin-left:10px;" type="primary"
            :loading="revokeLoading" @click="revokeSalaryData">
            撤销生成
          </el-button>
          <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary" @click="processnode">
            审核日志
          </el-button>

        </el-col>
      </div>
    </el-row>
    <div ref="box" class="box">
      <div class="left" :class="[isActive ? 'wid' : 'wids']">
        <div :class="[treeShow ? 'treeShow' : 'treeNotShow']" :style="{ height: treeHeight + 'px' }">
          <AgencyTree class="agencyTree" @handleTreeQuery="handleTreeQuery" />
        </div>
      </div>
      <div v-show="Show" class="resize" title="收缩侧边栏"></div>
      <div class="mid" :class="[isActive ? 'mids' : 'min']">
        <generateSalaryDataChildren :key="timer" ref="chil" :tab-pane="activeName"
          @makeSalaryDataCallback="makeSalaryDataCallback" @revokeSalaryDataCallback="revokeSalaryDataCallback"
          @checkloadCallback="checkloadCallback" @checksalaryloadCallback="checksalaryloadCallback"
          @monthEndStopCallback="monthEndStopCallback()" @revokeMonthEndStopCallback="revokeMonthEndStopCallback()"
          @setCloec="setCloec" />
      </div>
      <Drag ref="icon" />

    </div>
  </div>
</template>

<script>
import generateSalaryDataChildren from '@/views/generateSalaryData/children/generateSalaryDataChildren'
import AgencyTree from '@/components/tree/agencyTree'
import { getAgencyBank, getIsThirteen } from '@/api/baseInfo'
import Drag from '@/components/Drag'
export default {
  name: 'GenerateSalaryData',
  components: { generateSalaryDataChildren, AgencyTree, Drag },
  data() {
    return {
      treeHeight: null,
      Show: false,
      isActive: true,
      treeShow: false,
      checkloading: true,
      agencyBankLists: [],
      salaCardBank: '',
      timer: '',
      activeName: '0',
      checksalaryLoading: false,
      stopLoading: false,
      revokeMonthStopLoading: false,
      makeLoading: false,
      revokeLoading: false,
      Untreatedimg: require('@/assets/images/processed.png'),
      Processedimg: require('@/assets/images/select.png'),
      batch: "",//批次
      batchs: []//批次数组
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === '0') {
        this.Processedimg = require('@/assets/images/select.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
      } else {
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/blue.png')
      }
    }
  },
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  created() {
    this.initBaseInfo()
  },
  methods: {
    processnode() {
      this.$refs.chil.processnode()
    },
    getTeHeight() {
      this.treeHeight = window.innerHeight - 270
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    // 树显隐方法
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    checkloadCallback() {
      this.checkloading = false
    },
    // 树方法
    handleTreeQuery(data) {
      this.$refs.chil.handleTree(data)
    },
    //提前检测
    checkSalaryData() {
      this.checksalaryLoading = true
      this.$refs.chil.checkSalaryData()
    },
    //暂存
    MonthEndStop() {
      this.stopLoading = true
      this.$refs.chil.saveMonthEndStop()
    },
    //关闭暂存loading
    monthEndStopCallback() {
      this.stopLoading = !this.stopLoading
    },
    //暂存
    revokeMonthEndStop() {
      this.revokeMonthStopLoading = true
      this.$refs.chil.revokeMonthEndStop()
    },
    //暂存返回
    revokeMonthEndStopCallback() {
      this.revokeMonthStopLoading = false
    },
    checksalaryloadCallback() {
      this.checksalaryLoading = false
    },
    // 查询
    Query() {
      this.$refs.chil.query()
    },
    handleQuery() {
      this.$refs.chil.listQuery.salaCardBank = this.salaCardBank
      this.checkloading = true
      this.$refs.chil.handleQueryBank(this.salaCardBank, this.batch)

    },
    // 获取银行基础数据
    initBaseInfo() {
      getAgencyBank().then(response => {
        const allBank = { "code": -1, "name": "全部银行" }
        response.data.push(allBank);
        this.agencyBankLists = Object.assign({}, response.data)
      })
      //获取批次信息
      getIsThirteen().then(res => {
         let arr = [];
        res.data.forEach(item => {
          if (item == 0) {

            arr.push({
              code: item,
              name: "每月工资"
            });
          } else {
            arr.push({
              code: item,
              name: "第" + item + "批次"
            });
          }
        })
        this.batchs = arr
      })

    },
    //清楚筛选
    setCloec() {
      this.batch = ''
      this.salaCardBank = -1
    },
    showProgress() {
      this.makeLoading = true
      this.$refs.chil.show()
    },
    // 生成工资数据
    makeSalaryData() {
      this.makeLoading = true
      this.$refs.chil.makeSalaryData()
    },
    makeSalaryDataCallback() {
      this.makeLoading = !this.makeLoading
      this.salaCardBank = ''
    },
    // 撤销生成
    revokeSalaryData() {
      this.revokeLoading = true
      this.$refs.chil.revokeSalaryData()
    },
    revokeSalaryDataCallback() {
      this.revokeLoading = !this.revokeLoading
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/border.scss";

/*引入公共样式*/
.app-container {
  height: auto;
}

//  ::v-deep tbody>tr:nth-child(1) {
//   .el-checkbox {
//     display: none;
//   }
// }
</style>
